<!--
 * @Author: your name
 * @Date: 2021-09-13 19:18:57
 * @LastEditTime: 2021-11-05 14:41:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\components\socialUpload\socialUpload.vue
-->
<template>
  <div>
    <el-upload
      class="avatar-uploader quill-img"
      :action="fileUpload"
      :on-change="imgSaveToUrl"
      :headers="importHeaders"
      :show-file-list="false"
      :on-success="quillImgSuccess"
      :on-error="uploadError"
      :before-upload="quillImgBefore"
      accept=".jpg,.jpeg,.png,.gif"
    ></el-upload>
    <quill-editor
      class="editor"
      v-model="content"
      ref="quillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>

<script>
import Api from '@/api/feedBack/api'

// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'], // 引用  代码块
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
    ['image'] // 图片、视频
]
export default {
    name: 'socialUpload',
    components: {},
    props: {
        contentDefault: {
            type: String,
            default: ''
        }
    },
    data() {
        var mytoken = localStorage.getItem('token') // 要保证取到

        return {
            content: '',
            // 富文本编辑器
            editorOption: {
                theme: 'snow',
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.quill-img input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                }
            },
            // 本地路径
            localFile: {},
            // 本地图片
            loadImageNow: '',
            /* 得到token */
            importHeaders: { token: mytoken },
            //  文件上传
            fileUpload: `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/file/upload`,
            myValue: this.value
        }
    },
    computed: {},
    watch: {
        contentDefault: function() {
            this.content = this.contentDefault
        }
    },
    created() {},
    mounted() {},
    methods: {
    /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore(file) {
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                const pickUrl = Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs.quillEditor.quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                this.$message.error('图片插入失败')
            }
        },

        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },

        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl(file) {
            // 也可以用file
            this.localFile = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow = reader.result
            }
        },
        onEditorChange() {
            this.$emit('getContent', this.content)
        }
    }
}
</script>

<style scoped lang="less">
::v-deep .ql-editor {
  img {
    width: 100px;
    height: 100px;
  }
}
::v-deep .avatar-uploader {
  height: 3px;
}
::v-deep .ql-editor {
  height: 200px;
  overflow: auto;
}
</style>
<style scoped>
::v-deep .ql-editor li {
  list-style-type: decimal !important;
  list-style-position: inside !important;
}
::v-deep .ql-editor ul > li:before {
  content: '\2022';
}

::v-deep .ql-editor ul > li::marker {
  content: '';
  display: none;
}

::v-deep .ql-editor li:before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
/* ::v-deep .ql-container{
    z-index: 0;
} */
</style>
